<template>
    <m-layout>
      <mt-header slot="header" title="战术板" />
      <div slot="body">
        <!--信息-->
        <m-section class="info">
          <div class="heading heading-3">信息</div>
          <m-flexbox orient="vertical" :gutter="15" class="info-box">
            <m-flexbox-item><span class="info-key">持续时间：</span><span class="info-value">{{tacticalInfo.duration}}分钟</span></m-flexbox-item>
            <m-flexbox-item><span class="info-key">人数：</span><span class="info-value">{{tacticalInfo.playerNumber}}</span></m-flexbox-item>
            <m-flexbox-item><span class="info-key">球：</span><span class="info-value">{{tacticalInfo.ballNumber}}</span></m-flexbox-item>
            <m-flexbox-item><span class="info-key">篮筐：</span><span class="info-value">{{tacticalInfo.basketNumber}}</span></m-flexbox-item>
            <m-flexbox-item><span class="info-key">锥桶数量：</span><span class="info-value">{{tacticalInfo.equipmentNumber}}</span></m-flexbox-item>
            <m-flexbox-item><span class="info-key">是否分组：</span><span class="info-value">{{tacticalInfo.isGroup?'是':'否'}}</span></m-flexbox-item>
            <m-flexbox-item><span class="info-key">其他：</span><span class="info-value">{{tacticalInfo.other}}</span></m-flexbox-item>
          </m-flexbox>
        </m-section>
        <!--战术板-->
        <m-section>
          <div class="heading heading-3">战术板</div>
          <div class="tactical-box" >
            <div id="stop-div" @click="stopPlay">
              <m-flexbox justify="center">
                <div class="tactical-canvas" ref="tacticalEle"></div>
              </m-flexbox>
            </div>
            <m-flexbox orient="horizontal" justify="space-between" class="control-btn">
              <div class="previous" v-if="btnStatus.play || (!btnStatus.play && !btnStatus.pause)"
                   v-bind:class="{end: !btnStatus.first}"
                   @click="btnStatus.first && previous()">
              </div>
              <!--<div class="tactical-canvas" ref="tacticalEle"></div>-->
              <div class="next" v-if="btnStatus.play || (!btnStatus.play && !btnStatus.pause)"
                   v-bind:class="{end: !btnStatus.next}"
                   @click="btnStatus.next && next()">
              </div>
              <img id="play" v-if="btnStatus.play && firstPlay" src="/static/images/icon/tactics_play.png" alt="" ref="play" @click="start">
              <div id="rePlay" v-if="!btnStatus.play && !btnStatus.pause" @click="rePlay">重播</div>
            </m-flexbox>
          </div>
        </m-section>
        <!--描述-->
        <m-section>
          <div class="heading heading-3">描述</div>
          <div class="des" v-html="tacticalInfo.describe"></div>
        </m-section>
      </div>
    </m-layout>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      detail: state => state.tactical.detail,
      tacticalInfoContent: state => state.tactical.tacticalInfoContent
    })
  },
  data () {
    return {
      sportType: this.$route.params.id,
      tacticId: this.$route.params.tacticId,
      orgUserId: this.$route.query.orgUserId,
      playbook: {},
      tacticalInfo: {},
      tacticalInfoIndex: 0,
      firstPlay: true,
      btnStatus: {
        first: false,
        last: true,
        next: true,
        pause: false,
        play: true,
        previous: false
      }
    }
  },
  mounted () {
    this.loadScript('/static/js/playbook/playbook.js', () => {
      console.log('加载完成')
      this.$store.dispatch(('tactical/detail'), {
        tacticId: this.tacticId,
        orgUserId: this.orgUserId
      }).then(() => {
        this.initTactical(this.tacticalInfoContent)
      })
    })
  },
  methods: {
    initTactical (content) {
      const self = this
      self.playbook = new window.BasketBallPlaybook(self.$refs.tacticalEle)
      self.playbook.onstatechange = function (event) {
        let dom = self.$refs.play
        while (dom) {
          let id = dom.id
          if (id && id in event) {
            dom.disabled = !event[id]
          }
          dom = dom.nextSibling
        }
        self.btnStatus = event
        self.tacticalInfoIndex = self.playbook.index
        self.setCurTacticalInfo()
        // 最后一帧播完重置
        if (!self.btnStatus.play && !self.btnStatus.pause && !self.btnStatus.next) {
          self.firstPlay = false
        }
      }
      this.playBook(content)
    },
    playBook (str) {
      var scalePercent = (document.body.clientWidth * 2 / 750) * 0.5
      this.playbook.deserialize(this.detail.content)
      this.$refs.tacticalEle.style.zoom = scalePercent
      if (this.tacticalInfoContent.type && this.tacticalInfoContent.type !== 'full') {
        this.$refs.tacticalEle.style.height = '475px'
      }
      this.playbook.update()
    },
    setCurTacticalInfo () {
      this.tacticalInfo = this.tacticalInfoContent['frames'][this.tacticalInfoIndex]
    },
    start () {
      this.resetFirstPlay()
      this.playbook.play()
    },
    stopPlay () {
      this.playbook.pause()
    },
    previous () {
      this.resetFirstPlay()
      this.playbook.previous()
    },
    next () {
      this.resetFirstPlay()
      this.playbook.next()
    },
    rePlay () {
      this.resetFirstPlay()
      this.playbook.first()
      this.playbook.play()
    },
    resetFirstPlay () {
      !this.firstPlay && (this.firstPlay = true)
    },
    loadScript (url, callback) {
      let scrpit = document.createElement('script')
      scrpit.type = 'text/javascript'
      if (scrpit.readyState) { // IE
        scrpit.onreadystatechange = function () {
          if (scrpit.readyState === 'loaded' || scrpit.readyState === 'complete') {
            scrpit.onreadystatechange = null
            callback()
          }
        }
      } else {
        scrpit.onload = function () {
          callback()
        }
      }
      scrpit.src = url
      document.getElementsByTagName('head')[0].appendChild(scrpit)
    }
  }
}
</script>
<style lang="scss" scoped>
  .info{
    &-box{
      box-sizing: border-box;
      padding: 0 0.26rem 0.3rem 0.26rem;
      &-key{
        display: inline-block;
        width: 2rem;
        color: $color-sub;
      }
      &-value{
        display: inline-block;
        flex: 1;
        color: $color-black;
      }
    }
  }
  .tactical-box{
    position: relative;
    padding: 0.3rem 0;
    .control-btn{
      box-sizing: border-box;
      padding: 0 0.2rem;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      .previous {
        width: 0.6rem;
        height: 0.6rem;
        background: url('/static/images/icon/tactics_on_nor.png') no-repeat center/contain;
        &.end{
          background: url("/static/images/icon/tactics_on_dis.png") no-repeat center/contain;
        }
      }
      .next {
        width: 0.6rem;
        height: 0.6rem;
        background: url("/static/images/icon/tactics_under_nor.png") no-repeat center/contain;
        &.end{
          background: url("/static/images/icon/tactics_under_dis.png") no-repeat center/contain;
        }
      }
      #play{
        display: block;
        width: 1.12rem;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      #rePlay{
        width: 1.12rem;
        height: 1.12rem;
        text-align: center;
        line-height: 1.12rem;
        border-radius: 100%;
        background: rgba(0, 0, 0, 0.4);
        color: $color-white;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      #suspended {
        position: absolute;
        width: 1.12rem;
      }
    }
  }
  .des{
    padding: 0 0.26rem;
  }
</style>
